<template>
    <div>
        <ItemTopVue :playList="state.playList" :creator="state.creator"/>
        <ItemMusicListVue :playList="state.playList" :songs="state.songs" />
    </div>
</template>

<script>
import { onMounted ,reactive} from 'vue'
import { useRoute } from 'vue-router'
import {getItemMusic,getItemMusicList} from '@/request/api'
import ItemTopVue from '@/components/item/itemMusicTop.vue'
import ItemMusicListVue from '@/components/item/itemMusicList.vue'

export default {
    setup() {
        const state = reactive({
            playList: {},
            creator:{},
            songs:{}
        });
        onMounted(async () => {
            let id = useRoute().query.id;
            //获取歌单详情
            let res = await getItemMusic(id);
            state.playList = res.data.playlist;
            state.creator=res.data.playlist.creator;
            console.log('获取歌单头部详情');
            console.log(res);
            //获取歌单所有歌曲
            let result = await getItemMusicList(id);
            console.log('获取歌单里所有歌曲');
            console.log(result);
            state.songs=result.data.songs
            // console.log(state.songs);
            //   防止页面刷新，数据丢失，将数据保存到sessionStorage中
            sessionStorage.setItem("itemDetail", JSON.stringify(state));
        });
        return { state };
    },
    components: { ItemTopVue ,ItemMusicListVue}
}
</script>

<style lang="less" scoped>

</style>